import { Layout } from '@arco-design/web-react';
import { Link, Outlet } from 'react-router-dom'
import './system.css'
import { Menu } from '@arco-design/web-react';
const Sider = Layout.Sider;
const Content = Layout.Content;
const MenuItem = Menu.Item;
const System = () => {
    return <div className='system'>

        <Layout style={{ border: '1px,red',backgroundColor:'white'}}>
            <Sider
                className='system-sider'
               
                style={{
                    minWidth: 150,
                    maxWidth: 500,
                }}
            >
                <Menu
                    style={{ width: 200, height: '100%' }}
                    defaultOpenKeys={['0']}
                    defaultSelectedKeys={['1']}
                >
                    <Link to={'/home/system/account'}><MenuItem key='1'>基本设置</MenuItem></Link>
                    <Link to={'/home/system/security'}><MenuItem key='2' >安全设置</MenuItem></Link >
                    <Link to={'/home/system/bind'}><MenuItem key='3'>账号绑定 </MenuItem></Link>
                    <Link  to={'/home/system/message'}><MenuItem key='4'>新消息通知</MenuItem></Link>
                </Menu>

            </Sider>
            <Content style={{}}><Outlet/></Content>
        </Layout>


    </div>
}
export default System